<template>
  <Card>
    <div class="md:flex md:mb-5">
      <div class="text-3xl font-semibold" style="color: #4e598c">应用续订/退订比例</div>
    </div>
    <div class="md:flex">
      <Form :model="formState" ref="formRef" class="md:flex-row w-full flex-wrap" v-bind="formItemLayout">
        <div class="md:flex w-full md:justify-between">
          <div class="md:flex md:justify-start">
            <Col :span="24">
              <FormItem name="stepType" label="应用">
                <div class="md:w-30">
                  <Select v-model:value="appId" placeholder="请选择应用" :options="appOptions" :allowClear="true"> </Select>
                </div>
              </FormItem>
            </Col>
          </div>
          <Col :span="4">
            <FormItem>
              <div class="md:flex md:justify-end">
                <Button type="primary" shape="circle" @click="onSubmit">
                  <template #icon><SearchOutlined /></template>
                </Button>
                <Button style="margin-left: 5px" shape="circle" @click="resetForm">
                  <template #icon> <RedoOutlined /> </template>
                </Button>
              </div>
            </FormItem>
          </Col>
        </div>
      </Form>
    </div>
    <div class="md:flex">
      <div :id="subPieChartName" style="width: 300%; height: 300%"></div>
      <div :id="unsubPieChartName" style="width: 300%; height: 300%"></div>
    </div>
  </Card>
</template>

<script lang="ts" setup>
import { Card, Col, Form, FormItem, Select, Button } from 'ant-design-vue';
import { SearchOutlined, RedoOutlined } from '@ant-design/icons-vue';
import { onMounted, reactive, ref, defineProps } from 'vue';
import * as echarts from 'echarts';
import { ChartProps } from '/@/views/maintenance-center/cloud-service-monitor/Cards/props';
import { getAppSelectList } from '/@/api/operation-center/common/common';
import { AppTemplateResp } from '/@/api/operation-center/common/model/commonModel';
import { getAppSubscriptionProportion } from '/@/api/operation-center/tenant-opertation/app-subscription-analysis/appSubscriptionAnalysis';

const subPieChartName = 'sub-pie-chart';
const unsubPieChartName = 'unsub-pie-chart';

var subOption;
var unsubOption;

let appSubItemList: any[] = [];
let appUnsubItemList: any[] = [];

const formState = reactive<Record<string, any>>({});
const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 24 },
};

// Select 组件属性设置
const appId = ref();
const appOptions = ref<any[]>([]);

defineProps({
  ...ChartProps,
});
function initPieChart(pieChartName: string, pieChartData: any[], option: any, title: string) {
  let pieDom = document.getElementById(pieChartName);
  let myChart = echarts.init(pieDom);

  option = {
    title: {
      text: title,
      left: 'center',
    },
    series: [
      {
        type: 'pie',
        data: pieChartData,
        // radius: ['40%', '70%'],
      },
    ],
  };

  option && myChart.setOption(option);
}
const onSubmit = async () => {
  let param = appId.value;

  getAppSubscriptionProportion({ appId: param }).then((res) => {
    let appSubTenantNumList = res.appSubTenantNum;
    let appUnsubTenantNumList = res.appUnsubTenantNum;
    appSubItemList.push({
      name: '续订租户数',
      value: appSubTenantNumList[0],
    });

    appSubItemList.push({
      name: '未续订租户数',
      value: appSubTenantNumList[1],
    });

    appUnsubItemList.push({
      name: '退订租户数',
      value: appUnsubTenantNumList[0],
    });

    appUnsubItemList.push({
      name: '未退订租户数',
      value: appUnsubTenantNumList[1],
    });

    initPieChart(subPieChartName, appSubItemList, subOption, '应用续订比例');
    initPieChart(unsubPieChartName, appUnsubItemList, unsubOption, '应用退订比例');
  });
};

// 清空表单参数
const resetForm = () => {
  appOptions.value = [];
};
function convertAppOptions(res: AppTemplateResp[]) {
  let options: any[] = [];
  for (let i = 0; i < res.length; i++) {
    let appItem = res[i];
    let appOption = {
      label: appItem.name,
      value: appItem.id,
    };
    options.push(appOption);
  }
  appOptions.value = options;
}
onMounted(() => {
  getAppSelectList().then((res) => {
    convertAppOptions(res);
  });
});
</script>
